<template>
    <div>
        <van-card class="item" title="资环院学生会" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
            <template #tags>
                <p style="text-align:left">可提供服务：</p>
                <p>宣传，寻找新客户具体私聊谈</p>
            </template>
            <template #footer>
                <span>需赞助：2000元</span>
                <van-button size="mini" type="info">联系我</van-button>
            </template>
        </van-card>

        <van-card class="item" title="混元武道社团" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
            <template #tags>
                <p style="text-align:left">可提供服务：</p>
                <p style="text-align:left">①编辑朋友圈宣传文案<br>
                    ②可在朋友圈以及QQ空间转发宣传文案67次<br>
                    ③可介绍新客户消费（具体对应金额详谈）</p>
            </template>
            <template #footer>
                <span>需赞助：200元</span>
                <van-button size="mini" type="info">联系我</van-button>
            </template>
        </van-card>

        <van-card class="item" title="青年志愿者联合会" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
            <template #tags>
                <p style="text-align:left">可提供服务：</p>
                <p style="text-align:left">①在本次换届晚会中，商家的名字以及宣传语将出现在所有工作人员工作服上。<br>
                    ②商家可派人在结尾上台宣传。<br>
                    ③微信部将编辑推文对商家服务进行宣传。</p>
            </template>
            <template #footer>
                <span>需赞助：4000元</span>
                <van-button size="mini" type="info">联系我</van-button>
            </template>
        </van-card>

        <van-button to='/' type="primary" block round style="width: 80vw;position: fixed;bottom: 3vw;left: 50%;transform: translateX(-50%);">返回首页</van-button>
    </div>
</template>

<script>
import Vue from 'vue';
import { Card } from 'vant';

Vue.use(Card);
import { Button } from 'vant';

Vue.use(Button);

export default {

}
</script>


<style scoped>
.item {
    width: 95vw;
    margin: 2vw auto;
}
.van-card__title {
    font-size: 5vw;
    max-height: unset;
    height: auto;
    line-height: unset;
}
.van-card__footer {
    display: flex;
    justify-content: space-between;
    width: 65vw;
    margin-left: 23vw;
        align-items: center;
}
</style>
